import React, { Component } from 'react';
import styles from './index.less';
import PropTypes from 'prop-types';

export default class TRTooltip extends Component {
  static defaultProps = {
    suffix: true,
    suffixText: '单位MWh',
    sufText: '单位MW',
    style: {},
    fistData: function () {},
  };
  constructor(props) {
    super(props);
    this.state = {
      timer: '',
      array: [],
      type: '',
      powerAndelectricId: 1,
    };
  }
  componentDidMount() {
    let date = this.props.fistData();
    if (date) {
      this.setState({
        timer: date.timer,
        array: date.array,
      });
    }
  }
  show(timer, array, type, powerAndelectricId) {
    this.setState({
      timer: timer,
      array: array,
      type: type,
      powerAndelectricId: powerAndelectricId,
    });
  }
  render() {
    const { suffix, style, suffixText, sufText } = this.props;
    const { timer, array, type, powerAndelectricId } = this.state;
    if (timer === '') {
      return null;
    }
    return (
      <div className={styles.row} style={style}>
        <div className={styles.timer}>{timer}</div>
        {type ? (
          <>
            {suffix ? (
              <div className={styles.suffixText} style={{ marginLeft: '10px' }}>
                {powerAndelectricId === 1 ? suffixText : sufText}
              </div>
            ) : null}
          </>
        ) : (
          <>
            {suffix ? (
              <div style={{ marginLeft: '10px' }} className={styles.suffixText}>
                {suffixText}
              </div>
            ) : null}
          </>
        )}

        {array.map((item, index) => {
          return (
            <span key={index} className={styles.tag}>
              {item.name ? <span className={styles.title}>{item.name}：</span> : null}
              {item.value instanceof Array ? (
                <>
                  <span style={{ color: item.color[0] }}>{item.value[0]}</span>
                  <span style={{ color: item.color[1] }}>{item.value[1]}</span>
                </>
              ) : (
                <span style={{ color: item.color }}>{item.value}</span>
              )}
            </span>
          );
        })}
      </div>
    );
  }
}

TRTooltip.propTypes = {
  fistData: PropTypes.func,
  suffixText: PropTypes.string,
  sufText: PropTypes.string,
  style: PropTypes.object,
  suffix: PropTypes.bool,
};
